<template>
  <a-form :label-col="{ span: 10 }" :rules="Model.rules" :model="Model.params">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="Model.params.username" placeholder="请输入用户名" autocomplete="off" allow-clear>
        <template #prefix>
          <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item label="昵称" has-feedback name="nickname">
      <a-input v-model:value="Model.params.nickname" placeholder="请输入昵称" allow-clear>
        <template #prefix>
          <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item label="密码" has-feedback name="password">
      <a-input-password v-model:value="Model.params.password" placeholder="请输入密码" allow-clear>
        <template #prefix>
          <LockOutlined style="color: rgb(0,0,0)" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item label="确认密码" has-feedback name="repeatPassword">
      <a-input-password v-model:value="Model.params.repeatPassword" autocomplete="off" placeholder="请确认密码" allow-clear>
        <template #prefix>
          <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item>
      <a-button html-type="submit" block type="primary" @click="Model.submit()">注册</a-button>
    </a-form-item>
  </a-form>
</template>
<script setup lang="ts">

import { LockOutlined, UserOutlined } from "@ant-design/icons-vue";
import type { Rule } from "ant-design-vue/es/form";
import { Register } from "@/api/register";
import register = Register.register;

const Model = (() => {
  const checkRepeatPassword = async (_rule: Rule, value: string) => {
    if (!value){
      return Promise.reject("请再次输入密码！")
    }else if (s.params.repeatPassword !== s.params.password){
      return Promise.reject("两次密码不一致！")
    }
  }
  const submit = async () => {
    const res = await register({
      username: s.params.username,
      password: s.params.password,
      nickname: s.params.nickname
    })
    console.log(res.data);
  }
  const s = reactive({
    params: {
      username: "",
      password: "",
      repeatPassword: "",
      nickname: ""
    },
    rules: <Record<string, Rule[]>>{
      username: [{ required: true,message: '用户名不能为空！', trigger: 'blur'}],
      password: [{ required: true, message: "密码不能为空！", trigger: 'blur'}],
      repeatPassword: [{required:true,  validator: checkRepeatPassword, trigger: 'blur'}],
      nickname: [{ required: true, message: "请输入昵称！", trigger: "blur"}],
    },
    submit
  });
  return s;
})();
</script>
<style scoped lang="less">

</style>